import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Button, Card, Space, message, Tag, Tabs } from 'antd';
import { connect } from 'umi';
import MyDataTable from '@/components/MyDataTable';
import moment from 'moment';
import request from '@/utils/request';

const { TabPane } = Tabs;
const apiURL = '/api/services/app/POHeader/';
class ViewPage extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            params: { status: 'P' },
            freshNum: 0,
            record: [],
        };
    }
    doubleClick = (record: any) => {
        console.log(record);
    }
    setRowSelection = (items: any) => {
        this.setState({ record: items });
    }
    apprvPO = (status: string) => {
        const { record, freshNum } = this.state;
        if (record.length <= 0) {
            message.warning('请至少选择一条记录')
            return;
        }
        var data: any = []
        record.forEach((element: any) => {
            var obj = {
                id: element.id,
                status,
                user: this.props.currentUser.userName
            }
            data.push(obj)
        });
        console.log(data);
        request(apiURL + 'ApprvPO', {
            method: 'POST',
            data,
        }).then((response) => {
            if (response) {
                if (response.success) {
                    message.success('核准成功！');
                }
                this.setState({ freshNum: freshNum + 1 });
            }
        });

    }
    callback = (key: any) => {

        const { params, freshNum } = this.state;
        params.status = key
        this.setState({ params, freshNum: freshNum + 1 });
    }
    render() {
        const { params, freshNum } = this.state;
        const columns = [
            {
                title: '采购单号',
                dataIndex: 'poNum',
                render: (text: any, record: any) => <span> {myTag(text, record.approvalStatus)}</span>
            },
            {
                title: '采购金额',
                dataIndex: 'approvedAmount',
                render: (text: any) => <span>￥<strong>{text}</strong></span>
            },
            {
                title: '承诺日期',
                dataIndex: 'promiseDate',
                render: (text: any) => text ? moment(text).format("YYYY-MM-DD") : ''
            },
            {
                title: '采购员',
                dataIndex: 'buyerID',
            },
        ];
        const myTag = (text: string, status: string) => {
            if (status === "A")
                return <Tag color="#87d068">{text}</Tag>
            else if (status === "R")
                return <Tag color="#f50">{text}</Tag>
            else if (status === "P")
                return <Tag color="#2db7f5">{text}</Tag>
            else
                return <Tag>{text}</Tag>
        }
        return (
            <PageHeaderWrapper title={false}>
                <Card title="采购单核准" extra={[
                    <Space key="S1">
                        <Button type="primary" onClick={() => this.apprvPO('A')}>核准</Button>
                        <Button type="default" danger onClick={() => this.apprvPO('R')}>拒绝</Button>
                    </Space>
                ]}>
                    <Tabs defaultActiveKey="P" onChange={this.callback}>
                        <TabPane tab="待核准" key="P"></TabPane>
                        <TabPane tab="已核准" key="A"></TabPane>
                        <TabPane tab="已拒绝" key="R"></TabPane>
                    </Tabs>
                    <MyDataTable
                        act="GetList"
                        columns={columns}
                        freshNum={freshNum}
                        pageSize={10}
                        control="POHeader"
                        doubleClick={this.doubleClick}
                        rowSelection={(items: any) => this.setRowSelection(items)}
                        params={params}>
                    </MyDataTable>
                </Card>
            </PageHeaderWrapper>
        )
    }
}
export default connect(({ Abp, user }: API.IConnectState) => ({
    response: Abp.response,
    currentUser: user.currentUser,
}))(ViewPage);